<template>
  <view class="container">
	<view class="box">
		<p>余额</p>
		<p style="font-size:20px;margin: 5px 0;">￥0.00</p>
		<p>退款</p>
	</view>
	<view class="money">
		<p>请输入/选择充值金额</p>
		<input type="text" placeholder="请输入充值金额"/>
		<view style="display: flex;justify-content:space-between;">
			<view class="box1">200元</view>
			<view class="box1">100元</view>
			<view class="box1">50元</view>
			<view class="box1">20元</view>
		</view>
	</view>
	<button type="primary" style="width: 90%;margin: auto; background-color: #E99D42;margin-top:20px;border-radius: 20px;">确认充值</button>
	<p style="text-align: center;margin-top: 10px;" @click="record()">充值记录</p>
  </view>
</template>

<script>

  export default {
    data() {
      return {
       
    }
	},
    onLoad() {
    },
    methods: {
    record(){
		uni.navigateTo({
			url:'/pages/mine/info/record'
		})
	}
      }
  }
</script>

<style lang="scss">
.box{
	width: 95%;
	margin: auto;
	border-radius: 10px;
	box-shadow: 2px 3px 3px 2px gray;
	text-align:center;
	padding: 10px 0;
	margin-top: 10px;
}
.money{
	background-color:#EEEBEB;
	border-radius: 5px;
	margin-top: 20px;
	padding-left:3%;
	padding-right: 3%;
	padding-top: 10px;
	padding-bottom: 20px;
}
input{
	padding:0 10px;
	height: 40px;
	border: 1px solid gainsboro;
	margin-top: 20px;
}
.box1{
	width: 70px;
	height: 70px;
	margin-top: 15px;
	border: 1px gainsboro solid;
	text-align: center;
	line-height: 70px;
}
</style>
